<template>
  <div class="home">
    <el-form
        ref="sqlForm"
        :model="sqlForm"
        status-icon
        :rules="rules"
        label-width="120px">
      <el-form-item label="项目端口" prop="port">
        <el-input
            v-model="sqlForm.port"
            autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="数据库IP" prop="ip">
        <el-input
            v-model="sqlForm.ip"
            autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="数据库端口" prop="dbPort">
        <el-input
            v-model="sqlForm.dbPort"
            autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="用户名" prop="username">
        <el-input v-model="sqlForm.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="sqlForm.password"></el-input>
      </el-form-item>
      <el-form-item label="数据库名称" prop="dbName">
        <el-input v-model="sqlForm.dbName"></el-input>
      </el-form-item>
      <el-form-item label="表名称" prop="tableName">
        <el-input v-model="sqlForm.tableName" placeholder="表与表之间用#隔开"></el-input>
      </el-form-item>
      <el-form-item label="自定义登录">
        <el-switch
            v-model="sqlForm.hasLogin"
            active-text="是"
            inactive-text="否">
        </el-switch>
      </el-form-item>
      <div v-if="sqlForm.hasLogin">
        <el-form-item label="用户表">
          <el-input v-model="sqlForm.loginParam.tableName" placeholder="用户表"></el-input>
        </el-form-item>
        <el-form-item label="账号字段">
          <el-input v-model="sqlForm.loginParam.userNameCol"
                    placeholder="注:请填写get字段后面的值,例：getUserName => UserName"></el-input>
        </el-form-item>
        <el-form-item label="密码字段">
          <el-input v-model="sqlForm.loginParam.passWordCol" placeholder="密码字段"></el-input>
        </el-form-item>
      </div>
      <el-form-item label="自定义用户信息">
        <el-switch
            v-model="sqlForm.loginParam.hasUserInfo"
            active-text="是"
            inactive-text="否">
        </el-switch>
      </el-form-item>
      <div v-if="sqlForm.loginParam.hasUserInfo">
        <el-form-item label="展示姓名字段">
          <el-input v-model="sqlForm.loginParam.nickNameCol" placeholder="注:请填写get字段后面的值,例：getUserName => UserName"></el-input>
        </el-form-item>
        <el-form-item label="展示头像字段">
          <el-input v-model="sqlForm.loginParam.headImgCol" placeholder="注:请填写get字段后面的值,例：getUserName => UserName"></el-input>
        </el-form-item>
      </div>
      <el-form-item label="图片文件上传">
        <el-switch
            v-model="sqlForm.hasUploadImg"
            active-text="是"
            inactive-text="否">
        </el-switch>
      </el-form-item>
      <div v-if="sqlForm.hasUploadImg">
        <el-form-item label="上传地址">
          <el-input v-model="sqlForm.uploadUrl" placeholder="本机图片地址服务器的webapp绝对路径"></el-input>
        </el-form-item>
      </div>
      <el-form-item label="reids">
        <el-switch
            v-model="sqlForm.hasRedis"
            active-text="是"
            inactive-text="否">
        </el-switch>
      </el-form-item>
      <div v-if="sqlForm.hasRedis">
        <el-form-item label="redisIp">
          <el-input v-model="sqlForm.redisIp"></el-input>
        </el-form-item>
        <el-form-item label="redis端口">
          <el-input v-model="sqlForm.redisPort"></el-input>
        </el-form-item>
        <el-form-item label="redis密码">
          <el-input v-model="sqlForm.redisPassWord"></el-input>
        </el-form-item>
      </div>
      <el-form-item label="email发送">
        <el-switch
            v-model="sqlForm.hasEmail"
            active-text="是"
            inactive-text="否">
        </el-switch>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('sqlForm')">下一步</el-button>
        <el-button @click="resetForm('sqlForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {post} from "../util/http";
import {message} from "../util/notice";

export default {
  name: 'Home',

  data() {
    return {
      sqlForm: {
        port: '8001',
        hasEmail: false,
        hasRedis: false,
        hasUploadImg: true,
        ip: '81.69.235.149',
        dbPort: '3306',
        username: 'root',
        password: 'azhou',
        dbName: 'wxchat',
        tableName: 'admin#article#article_urls#comments#user_likes#wx_user',
        redisIp: '127.0.0.1',
        redisPort: '6379',
        redisPassWord: '',
        uploadUrl: 'F:\\\\zt\\\\software\\\\tomcat-8.5-win64\\\\apache-tomcat-8.5.68\\\\webapps',
        hasLogin: true,
        loginParam: {
          tableName: 'admin',
          userNameCol: 'UserName',
          passWordCol: 'PassWord',
          hasUserInfo: true,
          headImgCol: 'HeadImg',
          nickNameCol: "NickName"
        }
      },
      rules: {
        ip: [{
          required: true,
          message: '请输入数据库IP地址',
          trigger: 'blur'
        }],
        dbPort: [{
          required: true,
          message: '请输入数据库端口',
          trigger: 'blur'
        }],
        username: [{
          required: true,
          message: '请输入数据库用户名',
          trigger: 'blur'
        }],
        password: [{
          required: true,
          message: '请输入数据库密码',
          trigger: 'blur'
        }],
        dbName: [{
          required: true,
          message: '请输入数据库名称',
          trigger: 'blur'
        }],
        tableName: [{
          required: true,
          message: '请输入数据库名称',
          trigger: 'blur'
        }],
      },
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          post("/db/checkDBParam", this.sqlForm).then(res => {
            localStorage.setItem("random", res);
            message("数据库连接成功");
            this.$router.push("/table");
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
  },
}
</script>
